<template>
	<view class="page">
		<view class="h30"></view>
		<view class="block">
			<view @click="$navigateTo('/pagesA/pages/list/feedback-list')" class="flex-SB"
				style="height: 70rpx;line-height: 70rpx;">
				<view>反馈记录</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="h30"></view>
		<view class="block">
			<view class="main-title">问题类型</view>
			<view class="flex" style="display: flex;">
				<view @click="changeTag('产品建议')" class="taglist" :class="{taglistac:tagname=='产品建议'}">产品建议</view>
				<view @click="changeTag('意见反馈')" class="taglist" :class="{taglistac:tagname=='意见反馈'}">意见反馈</view>
				<view @click="changeTag('其他问题')" class="taglist" :class="{taglistac:tagname=='其他问题'}">其他问题</view>
			</view>
			<view class="h30"></view>
			<view style="">详细说明</view>
			<view style="width: 100%;border: 1px solid #ccc;border-radius: 10px;margin: 30rpx auto;">
				<textarea v-model="text" style="width: 94%;margin: 20rpx auto;"></textarea>
			</view>
			<view style="display: flex;height: 45rpx;line-height: 45rpx;">
				<view>图片上传</view>
				<view style="font-size: 28rpx;margin-left: 20rpx;color: #999999;">请提供问题相关的截图或照片</view>
			</view>
			<view style="margin: 40rpx auto;">
				<block v-if="tmpImg">
					<image @click="chooseImage" :src="tmpImg" style="width: 80px;height: 80px;"></image>
				</block>
				<block v-else>
					<view  @click="chooseImage" style="width: 80px;height: 80px;background-color: #f4f5f7;display: flex;align-items: center;justify-content: center;">
							<u-icon name="camera-fill" size="28" color="#01D6D6"></u-icon>
					</view>
				</block>
			</view>
			<view style="margin: 30rpx auto;">联系方式</view>
			<view style="border: 1px solid #ccc;border-radius: 6px;">
				<input v-model="numbers" placeholder="请输入联系方式" style="width: 94%;margin: 10rpx auto;height: 34px;line-height: 34px;" />
			</view>
			<view style="width: 690rpx;margin: 30rpx auto;display: flex;justify-content: center;">
				<u-button @click="upload" type="primary" text="提交反馈"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				tagname: '',
				text: '',
				numbers: '',
				tmpImg:''
			};
		},
		methods: {
			chooseImage(){
				uni.chooseImage({
					count:1,
					success: (e) => {
						this.tmpImg = e.tempFilePaths[0];
					}
				})
			},
			changeTag(str) {
				this.tagname = str;
			},
			upload() {
				if (!this.tagname) {
					uni.showToast({
						title: '请选择问题类型',
						icon: 'none'
					});
					return;
				}
				if (!this.text) {
					uni.showToast({
						title: '请输入详细说明',
						icon: 'none'
					});
					return;
				}
				if (!this.numbers) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.numbers)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if(this.tmpImg){
					let a = uni.uploadFile({
						url: 'https://baxztech.com/bian_admin_api/client/add_feedback',
						filePath: this.tmpImg,
						name: 'file',
						formData: {
							content: this.text,
							phone:this.member.phone,
							numbers:this.numbers,
							imei:this.member.imei,
							type:this.tagname,
							upload_time:parseInt(new Date().getTime()/1000)
						},
						success: (res) => {
							if(res.statusCode == 200){
								let up = JSON.parse(res.data);
								if(up.status == 200){
									this.$toast('提交成功！')
									setTimeout(()=>{
										uni.navigateBack()
									},1600)
								}else{
								this.$toast('系统错误！')
							}
								
							}else{
								this.$toast('系统错误！')
							}
						}
					});
				}else{
					uni.$u.http.post('/client/add_feedback',{
							content: this.text,
							phone:this.member.phone,
							numbers:this.numbers,
							imei:this.member.imei,
							type:this.tagname,
							upload_time:parseInt(new Date().getTime()/1000)
						}).then(res=>{
							if(res.status == 200){
								this.$toast('提交成功！')
								setTimeout(()=>{
									uni.navigateBack()
								},1600)
							}else{
								this.$toast('系统错误！')
							}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.taglist {
		height: 32px;
		line-height: 32px;
		background-color: #F2F6F6;
		text-align: center;
		font-size: 14px;
		color: #333;
		padding: 0px 10px;
		margin-right: 10px;
	}

	.taglistac {
		height: 32px;
		line-height: 32px;
		background-color: #01D6D6;
		text-align: center;
		font-size: 14px;
		color: #fff;
		padding: 0px 10px;
		margin-right: 10px;
	}

	.main-title {
		font-size: 34rpx;
		height: 50px;
		line-height: 50px;
		border-radius: 10px 10px 0px 0px;
		background-color: #FBFCFC;
		// padding: 0px 12px;
	}
</style>